<template>
  <cl-dialog title="修改收款方式" width="450px" :visible.sync="visible" :before-close="beforeClose" @close="close" :props="{
    top: '10vh',
    appendToBody: true,
    closeOnClickModal: false
  }">
    <el-form ref="form" :model="form" label-position="top" :disabled="saving">
      <!-- <el-form-item label="收款方式" prop="payment_way_id" :rules="[{ required: true, message: '请选择收款方式' }]">
        <cl-select clearable v-model="form.payment_way_id" style="width: 100%">
          <el-option v-for="item in skList" :value="item.value" :label="item.label" />
        </cl-select>
      </el-form-item> -->
      <el-form-item v-for="(item,index) in skList"  :key="index" style="width: 100%;" :label="item.label">
        <el-input v-model="item.money"></el-input>
      </el-form-item>
      <!-- <el-form-item style="width: 100%;" label="未消耗金额" prop="no_cost">
        <el-input v-model="form.no_cost"></el-input>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <el-button @click="close">关闭</el-button>
      <el-button type="primary" @click="submit" :loading="saving">确定</el-button>
    </template>
  </cl-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      saving: false,
      form: {
        order_no: "",
        pay_data: []
      },
      rules: {

      },
      skList: [],
      payment_way_id: 0,
      real_amount: 0
    }
  },
  methods: {
    open(data = {}) {
      this.visible = true;
      this.form.id = data.id;
      this.payment_way_id = data.payment_way_id || "";
      this.real_amount = data.real_amount || "";
      this.form.order_no = data.order_no || "";
      this.getSkList(data.dept_id)
    },
    async getSkList(id) {
      let res = await this.$service.reconciliation.deptPaymentWayNoPage({ dept_id: id })
      if (res.length) {
        this.skList = res.map(ite => {
          return {
            label: `${ite.pay_name}`,
            money: ite.id == this.payment_way_id ? this.real_amount : 0,
            id: ite.id
          }
        })
      }
    },
    submit() {
      this.$refs.form.validate(async (valid, errors) => {
        if (!valid) return;
        try {
          this.saving = true;
          console.log(this.form);
          this.form.pay_data = this.skList
          await this.$service.reconciliation.updatePaymentWay(this.form);
          this.$message.success("操作成功");
          this.$emit("successed");
          this.saving = false;
          this.close();
        } catch (error) {
          this.saving = false;
        }
      });
    },
    beforeClose(done) {
      if (this.saving) return;
      done();
    },
    close() {
      if (this.saving) return;
      this.visible = false;
      this.reset();
    },
    reset() {
      this.saving = false;
      this.$refs.form.resetFields();
    }
  }
};

</script>

<style lang="scss" scoped>
::v-deep {
  .el-radio {
    margin-bottom: 10px !important;
  }
}
</style>
